<template>
  <el-container>
    <el-main class="main-select-body bgfff">
      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="dialogEdit(null)">新增</el-button>
        </el-form-item>
      </el-form>
      <div class="table-bg"></div>
      <el-table
        class="marT20"
        :data="tableData"
        :height="tableHeight"
        v-loading="loading"
        @row-dblclick="dialogEdit"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column width="70" align="center" type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        ></el-table-column>
        <el-table-column :label="$t('base.table.action')">
          <template slot-scope="scope">
            <el-button type="text" @click="dialogEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="changePageSize"
        @current-change="changePageNo"
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </el-main>
    <el-dialog
      append-to-body
      width="600px"
      :title="title"
      :visible.sync="dialogValue"
      @close="dialogValue = false"
    >
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="想定名称" prop="scenarioName">
          <el-input v-model="ruleForm.scenarioName"  maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="想定描述">
          <el-input type="textarea" v-model="ruleForm.scenarioDesc"  maxlength="2000" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="文件">
          <UploadFile
            v-if="dialogValue"
            list-type="none"
            :list="ruleForm.scenarioFiles"
            ref="fileRef1"
          />
        </el-form-item>
        <el-form-item label="图片">
          <UploadFile accept=".jpg,.png" v-if="dialogValue" :list="ruleForm.imgFiles" ref="fileRef2" />
        </el-form-item>
        <el-form-item label="多媒体">
          <UploadFile
          accept=".mp4"
            v-if="dialogValue"
            list-type="none"
            :list="ruleForm.videoFiles"
            ref="fileRef3"
          />
        </el-form-item>
        <el-form-item label="动态地图">
          <el-input type="textarea" v-model="ruleForm.dynamicMapUrl"  maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="想定状态">
          <el-radio-group v-model="ruleForm.scenarioStatus">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emitClose">取 消</el-button>
        <el-button type="primary" @click="emitSave">保 存</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import { wantToBeAPI as request } from "@/api";
import curd from "@/mixins/curd";
import UploadFile from "@/components/upload-file";
export default {
  mixins: [curd],
  components: {
    UploadFile,
  },
  data() {
    return {
      request: request,
      dialogText: "想定",
      columns: [
        { prop: "scenarioName", label: "想定名称" },
        { prop: "scenarioStatusText", label: "状态" },
        { prop: "createTime", label: "创建时间" },
      ],
      ruleForm: {
        id: undefined,
        scenarioName: "",
        scenarioDesc: "",
        scenarioFiles: [],
        imgFiles: [],
        videoFiles: [],
        dynamicMapUrl: "",
        scenarioStatus: "1",
      },
      resetForm: {
        id: undefined,
        scenarioName: "",
        scenarioDesc: "",
        scenarioFiles: [],
        imgFiles: [],
        videoFiles: [],
        dynamicMapUrl: "",
        scenarioStatus: "1",
      },
      rules: {
        scenarioName: [
          { required: true, message: "想定名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    dialogEdit(item) {
      this.currentDetail = item;
      if (item) {
        this.request.read(item.id).then((res) => {
          this.ruleForm.id = item.id;
          this.ruleForm.scenarioName = res.scenarioName;
          this.ruleForm.scenarioDesc = res.scenarioDesc;
          this.ruleForm.dynamicMapUrl = res.dynamicMapUrl;
          this.ruleForm.scenarioFiles = res.scenarioFiles || [];
          this.ruleForm.imgFiles = res.imgFiles || [];
          this.ruleForm.videoFiles = res.videoFiles || [];
          this.dialogValue = true;
        });
      } else {
        this.dialogValue = true;
        this.ruleForm = JSON.parse(JSON.stringify(this.resetForm));
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
        });
      }
    },
    formatTableData(tableData) {
      tableData.forEach((el) => {
        el.scenarioStatusText = "";
        if (el.scenarioStatus == 0) {
          el.scenarioStatusText = "禁用";
        } else if (el.scenarioStatus == 1) {
          el.scenarioStatusText = "启用";
        }
      });
    },
    emitSave() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 文件上传对象
          const fileUploadForm1 = this.$refs.fileRef1.getList();
          const fileUploadForm2 = this.$refs.fileRef2.getList();
          const fileUploadForm3 = this.$refs.fileRef3.getList();

          const formData = {
            id: this.ruleForm.id,
            scenarioName: this.ruleForm.scenarioName,
            scenarioDesc: this.ruleForm.scenarioDesc,
            dynamicMapUrl: this.ruleForm.dynamicMapUrl,
            scenarioStatus: this.ruleForm.scenarioStatus,

            scenarioFiles: fileUploadForm1.addList,
            scenarioFileIds: fileUploadForm1.removeList,
            imgFiles: fileUploadForm2.addList,
            imgFileIds: fileUploadForm2.removeList,
            videoFiles: fileUploadForm3.addList,
            videoFileIds: fileUploadForm3.removeList,
          };
          // formdata
          const formData2 = new FormData();
          formData2.append("id", formData.id);
          formData2.append("scenarioName", formData.scenarioName);
          formData2.append("scenarioDesc", formData.scenarioDesc);
          formData2.append("dynamicMapUrl", formData.dynamicMapUrl);
          formData2.append(
            "scenarioStatus",
            formData.scenarioStatus.toString()
          );
          formData.scenarioFiles.forEach((i) => {
            formData2.append(`scenarioFiles`, i);
          });
          formData.scenarioFileIds.forEach((i) => {
            formData2.append(`removeScenarioFileIds`, i);
          });
          formData.imgFiles.forEach((i) => {
            formData2.append(`imgFiles`, i);
          });
          formData.imgFileIds.forEach((i) => {
            formData2.append(`removeImgFileIds`, i);
          });

          formData.videoFiles.forEach((i) => {
            formData2.append(`videoFiles`, i);
          });
          formData.videoFileIds.forEach((i) => {
            formData2.append(`removeVideoFileIds`, i);
          });

          this.request[this.ruleForm.id ? "update" : "create"](formData2).then(
            (res) => {
              this.onSearch();
              this.emitClose();
            }
          );
        }
      });
    },
  },
};
</script>
